<template>
	<div class="dailyTaskAdming" v-loading="dailyTaskAdminLoading">
		<div class="title">任务管理</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <!-- <el-form-item label="站点名称"  label-width="90px">
          <el-select v-model="searchForm.type" placeholder="请选择任务类型">
              <el-option label="任务类型" value="类型1"></el-option>
              <el-option label="任务类型" value="类型1"></el-option>
              <el-option label="任务类型" value="类型1"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="接收人" label-width="90px">
          <!-- <el-input v-model="searchForm.receiver" placeholder="请输入接收人"></el-input> -->
          <el-select v-model="searchForm.acceptPerson" :loading="receUserLoading" placeholder="请选择接收人" @focus="receUserFocus" clearable>
            <p v-for="(item, index) of userAdminList.data" :key="index">
              <el-option :label="item.username" :value="item.username" se></el-option>
            </p>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
          <!-- <el-button type="primary" class="greenBtn" size="mini" @click="added">添加</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="taskAdmin.data" border size="mini"
        style="width: 100%" :header-cell-style="{color: '#444444',}"
      > 
        <el-table-column
          prop="taskId"
          label="任务编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmtPublish"
          label="派发时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="recevPerson"
          label="接收人员"
          align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="任务类型"
          align="center">
          <template slot-scope="scope">
            {{getTaskType(scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="接收时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmtFinish"
          label="完成时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="完成情况"
          align="center">
          <template slot-scope="scope">
            {{scope.row.status ? '已完成' : '未完成'}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="taskAdmin.total"></myPaging>

    <el-dialog width="70%" :visible.sync="addedFormVisible">
      <div slot="title">
        <p>新增</p>
      </div>
      <el-form :model="addedForm" :rules="addedFormRules" size="mini" ref="addedForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务类型" prop="type" >
              <el-select v-model="searchForm.type" placeholder="请选择任务类型">
                <el-option label="例行巡检" value="例行巡检"></el-option>
                <el-option label="保养检修" value="保养检修"></el-option>
                <el-option label="移动检测" value="移动检测"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间" prop="time" >
              <el-date-picker
                v-model="addedForm.time"
                type="date"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择派发时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收人员" prop="addr" >
              <el-select v-model="addedForm.station" placeholder="请选择水站名称">
                <p v-for="(item, index) of stationList" :key="index">
                  <el-option :label="item" :value="item" se></el-option>
                </p>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人员" prop="receiver">
              <el-input v-model="addedForm.receiver" placeholder="接收人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item >
          <el-button type="primary" class="greenBtn" size="mini" @click="addedSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import myPaging from '@/components/myPaging.vue'

export default {
  name: 'dailyTaskAdming',
  data () {
    return {
      msg: 'hello dailyTaskAdming!',
      dailyTaskAdminLoading: false,
      receUserLoading: false,
      searchForm: {
        // type: '',
        acceptPerson: '',
      },
      addedFormVisible: false,
      formData: {},
      addedForm: {
        time: '',
        type: '',
        station: '',
        receiver: '',
      },
      addedFormRules: {},

		}
  },
	methods: {
    ...mapActions([
      'getDailyTaskList',
      'fetchUserList'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.dailyTaskAdminLoading = true
      await this.getDailyTaskList({...this.searchForm, ...pageOption})
      this.dailyTaskAdminLoading = false
    },
    addedSubmit() {},
    added() {
      this.addedFormVisible = true
    },
    uploadChange(file, fileList){
			this.addedForm.files = fileList
    },
    uploadExceed(files, fileList) {
			this.$notify.warning({
				title: '警告',
				message: '最多上传2张图片',
			})
    },
    handleSubmit(response) {
			this.formData.append('files', response.file)
    },
    routerDetail(id) {
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    async receUserFocus() {
      this.receUserLoading = true
      if(this.userAdminList.total <= 0) {
        await this.fetchUserList({
          account: '',
          role: '',
          pageSize: 99999,
          pageNum: 1
        })
      }
      this.receUserLoading = false
    },
    getTaskType(val) {
      let taskTypsList = [
        {name: '例行巡检', value: 'inspect'},
        {name: '保养检修', value: 'maintenance'},
        {name: '移动检测', value: 'mobile'},
      ]
      return taskTypsList.find(v => v.value === val).name
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      taskAdmin: 'getTaskAdmin',
      userAdminList: 'getUserAdminList',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.dailyTaskAdming {
  background: #fff;
  padding: 0 20px 0 20px;
  min-height: 100%;
}
.dailyTaskAdming .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.dailyTaskAdming .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}

</style>
<style>

.dailyTaskAdming .el-dialog__header {
  background-image: linear-gradient(90deg, 
    #4eb2ff 0%, 
    #0b69cb 100%
  ), 
  linear-gradient( 
    #1e87f0,
    #1e87f0
  );
  padding: 20px;
  color: #fff;
}

.dailyTaskAdming .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>

